<template>
  <div class="popRestTab"  v-show="isPopRestShow">
    <div class="restReason">
      <p >请选择小休原因</p>
      <ul>
        <li v-for="(item,index) in sleepReasonDetail">
          <span :class="{unactive:isRestReasonActive !=index,active:isRestReasonActive ==index}" @click="submitRestReason(index,item)">{{item.restReason}}</span>
        </li>
      </ul>
      <p class="submitReason">
        <span class="restReasonConfirm" @click="confirmRest">确定</span>
        <span class="restReasonCancel" @click="cancelRest">取消</span>
      </p>
    </div>
  </div>
</template>
<script>
  import softphoneiframe from 'service/softPhoneIframe.js';

  export default {
    data() {
      return {
        sleepReasonDetail: '',
        isRestReasonActive: 0,
        isPopRestShow: false,
        logoutData:{},
        popLogout: 0,  //弹出语音是否签出按钮
        popRest: 0,
        isPopLogoutShow: false,
      };
    },
    components: {

    },
    computed: {

    },
    watch: {
      popLogout(){
        this.isPopLogoutShow = true;
      },
      popRest(){
        this.isPopRestShow = true;
      },
    },
    methods: {
  //获取小修原因列表
      async getSleepReason() {
        let _this = this;
        let jsondata = await softphoneiframe.getSleepReason({
        })
        if (!jsondata) {
          jsondata = []
        }
            _this.sleepReasonDetail =jsondata;
            _this.restReasonData = _this.sleepReasonDetail[0].restReason;
            _this.restCodeData = _this.sleepReasonDetail[0].restReasonCode;
      },
//      getSleepReason(){
//        var sleepData = {restReason: '', restType: ''};
//        var _this= this;
//        _this.$ajax({
//          method: 'POST',
//          baseURL: this.$ajax.defaults.baseURLOMS,
//          headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
//          url: 'findRestReasonList.action',
//          transformRequest: [function (data) {
//            // Do whatever you want to transform the data
//            let ret = ''
//            for (let it in data) {
//              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
//            }
//            return ret;
//          }],
//          data: {
//            mapJson: JSON.stringify(sleepData)
//          }
//        })
//          .then(function(res){
//            _this.sleepReasonDetail =res.data;
//            console.log(res.data);
//            _this.restReasonData = _this.sleepReasonDetail[0].restReason;
//            _this.restCodeData = _this.sleepReasonDetail[0].restReasonCode;
//          })
//      },
      submitRestReason(i,item){
        this.restCodeData = item.restReasonCode;
        this.restReasonData = item.restReason;
        this.isRestReasonActive = i;
      },
      confirmRest(){
        this.isPopRestShow = false;
        myframe.window.fn.restYY(this.restCodeData);
      },
      cancelRest(){
        this.isPopRestShow = false;
        myframe.window.fn.changeRest();
      },
    },
    mounted() {

     let  _this = this;
      window.addEventListener("message", function(e) {
        if(typeof e.data == "object"){
          if(e.data.pop == true){
            _this.popLogout ++;
            _this.logoutData = e.data;
          }else if(e.data.restPop == true){
            _this.getSleepReason()
            _this.popRest ++;
            _this.restData = e.data;
          }
        }else{

        }
      }, false);
    }
  }
</script>
<style>
  .popRestTab {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .restReason{
    background: #fff;
    width: 178px;
    height:300px;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 80px 65%;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e8eb;
    box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.5);
  }
  .restReason ul{
    overflow: hidden;
    padding: 5px 0;
  }
  .restReason li{
    /*width: 33%;*/
    /*height: 27px;*/
    line-height: 17px;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 5px;
  }
  .restReason li>span{

    display: inline-block;
    width: 160px;
    margin: 3px 5px;
    /*margin-bottom: 10px;*/
    padding: 3px 3px;
    border-radius: 5px;
    cursor: pointer;
  }
  .restReason>p:first-child{
    font-size: 16px;
    line-height: 40px;
    box-sizing: border-box;
    /*padding-left: 0px;*/
  }
  .restReason .submitReason{
    height: 28px;
    line-height: 28px;
    cursor: pointer;
  }
  .restReason li>span.unactive{
    border: 1px solid #ddd;
  }
  .restReason li>span.active{
    border: 1px solid #f05d49;
    background-color: #f05d49;
    color: #fff;
  }
  .restReasonConfirm{
    font-size: 15px;
    /*margin-left: 177px;*/
    display: inline-block;
    background: #f05d49;
    color: #fff;
    border-radius: 5px;
    width: 50px;
    text-align: center;
    cursor: pointer;
  }
  .restReasonCancel{
    font-size: 15px;
    margin-left: 6px;
    display: inline-block;
    background: #aaa;
    color: #fff;
    border-radius: 5px;
    width: 50px;
    text-align: center;
    cursor: pointer;

  }
</style>
